@charset "utf-8";
#skipnav { position:absolute; top:0; left:0; width:100%; z-index:10000; }
#skipnav a {display:block; position:absolute; top:0; left:0; height:0px; font-size:0px; line-height:0px; text-align:center; }
#skipnav a:hover,
#skipnav a:active,
#skipnav a:focus { position:relative; margin:20px auto; width:90%; height:80px; line-height:80px; background:#261d18; text-align:center; color:#ffd84e; border:2px solid #ffd84e; font-weight:bold; font-size:20px; }
body {position:relative; background:#f5f5f5;}
.wrap {display:block !important; position:relative !important; width:1499px !important; max-width:100% !important; margin:0 auto !important;}
.con_wrap {max-width:93%;}
.container {position:relative; overflow:hidden; width:1920px; margin:0 auto;}
/*header*/
header {position:fixed; width:100%; margin:0 auto; z-index:9980;}
header .logo {display:block; position:absolute; left:0; top:50px;}
header .logo a {display:block; width:286px; height:43px; background:url('/img/inc/logo_w.png') no-repeat;}
#header { position: absolute; left: 0; display: flex; line-height: 3em; padding: 0 2em; width: 100%; z-index: 9985; transition: all .45s; height: 5px; top: 0; margin-top: 0px; }
#header.middle { margin-top: 0; }
#header.top { background:#fff; /*backdrop-filter:blur(5px);*/ position: fixed; /*box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.045);*/ z-index: 9984; height: 94px; padding-top:5px; transition:.35s all; transform:scale(1)}
.topBg .top .logo {top:20px !important;}
.topBg .top .logo a {background:url('/img/inc/logo_b.png') no-repeat; transition:.35s all; transform:scale(.75)}
.topBg .top nav {margin-top:10px;}
.topBg .top nav a, .topBg .top nav a span {color:#000;}
.topBg .top nav a, .topBg .top nav a span {font-size:15px;}
.topBg .top .dropbtn .dropdown .stroke .dropdown-content li a span {color:#fff;}
.topBg .top .toggle-button {top:30px;}
.topBg .top .toggle-button span {background:linear-gradient(45deg, #cdeb00, #f77856, #ff7b89);}
.topBg .top .toggle-button.active span { background-color: #fff !important; background:#fff;}
.topBg .top .overlay nav>ul>li>a,
.topBg .top .overlay.visible nav>ul>li>ul li a span{color:#fff;}
.base { width: 100%; display: flex; justify-content: center; }
nav {display: flex; position: fixed; left:714px; margin:40px auto; transition: all 0.65s;}
nav a, nav a span {font-family:'gmarket-sans-ttf-light'; transition:.25s; color:#fff; font-size:18px;}
nav a:hover span {font-family:'gmarket-sans-ttf-bold'; color:#fff;}
nav .topmenu {width:100%;}
.dropbtn {display:block; position:relative; margin:0 auto 0; text-align:center; }
.dropbtn .dropdown .stroke .dropdown-content li a span{padding:0;}
.dropbtn>li>a {display:block; padding:24px 0; color:#fff; width:180px; font-weight:300; transition:.3s all; text-align:center;}
.dropbtn li.dropdown { display:inline-block; }
.stroke a { position: relative;}
.stroke .dropdown-content { display: none; position: absolute; background:#1d69c7; color:#fff; width:180px; padding:25px 10px; box-shadow:0 7px 10px rgba(0,0,0,.15); border-radius:0 40px 0 40px; text-align:center; opacity:0; transition:.45s all;}
.stroke .dropdown-content li a {display:block; position:relative; width:auto; padding:3px 0; color:#fff;}
.stroke .dropdown-content li a:hover span { color:#fff; font-family:'gmarket-sans-ttf-midium'; opacity:1;}
.stroke .dropdown-content li a span {position:relative; padding:36px 10px; font-size:15px; line-height:100%; color:#fff; opacity:.65;}
.dropdown:hover .dropdown-content { display: block; animation: dropdown_text .35s 0s both; transition: .3s ease-in-out; }
@keyframes dropdown_text {
	0% { opacity: 0; transform: translateY(60px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* Toggle button styles. */
.toggle-button { position: absolute; transition: .3s ease-in-out; width: 32px; height: 24px; display: block; top: 60px; right:0; z-index: 1001; }
.toggle-button span { position: absolute; height: 3px; border-radius:20px; width: 100%; background-color:#fff; top: 0; transition: transform .3s ease-in-out, opacity .3s ease-in-out; }
.toggle-button span:nth-child(1) { top: 0px; }
.toggle-button span:nth-child(2),
.toggle-button span:nth-child(3) { top: 10px;}
.toggle-button span:nth-child(4) { top: 20px; width:24px;}
.toggle-button.active span { background-color: #fff !important; background:#fff;}
.toggle-button.active span:nth-child(1),
.toggle-button.active span:nth-child(4) { opacity: 0; }
.toggle-button.active span:nth-child(2) { transform: rotate(45deg); }
.toggle-button.active span:nth-child(3) { transform: rotate(-45deg); }
.toggle-button.active span:nth-child(4) { transform: rotate(-50deg); }
.overlay {position:fixed; top:0; left:0; width:100vw; height:100vh; opacity:0; visibility:hidden; display:flex; justify-content:end; align-items:center; transition:.3s; z-index:1000; box-shadow:0 0 20px rgba(0,0,0,.75);}
.overlay.gradient_purple {background:linear-gradient(-180deg, #56329e, #d358b5);}
.overlay.gradient_orange {background:linear-gradient(-40deg, #fad126, #ff544f);}
.overlay nav {display:block; position:relative; left:0; margin:0 auto; width:95%; height:auto; text-align:center;}
.overlay nav>ul {width:90%; list-style:none; padding:0; margin:0 auto;}
.overlay nav>ul>li {display:inline-block; margin:0 3%; opacity:0; vertical-align:text-top;}
.overlay nav>ul>li>a {text-decoration:none; color:#fff; opacity:1; transition:opacity .2s ease; font-size:28px !important; font-family:'gmarket-sans-ttf-bold'; margin-bottom:40px;}
.overlay nav>ul>li>a:hover {opacity:1; }
.overlay.visible {left:0; height:100vh; opacity:1; visibility:visible;}
.overlay.visible nav ul li {animation:fadeInLeft .45s ease forwards;}
.overlay.visible nav ul li:nth-child(1) {animation-delay:.23s;}
.overlay.visible nav ul li:nth-child(2) {animation-delay:.26s;}
.overlay.visible nav ul li:nth-child(3) {animation-delay:.29s;}
.overlay.visible nav ul li:nth-child(4) {animation-delay:.35s;}
.overlay.visible nav ul li:nth-child(5) {animation-delay:.40s;}
.overlay.visible nav ul li:nth-child(6) {animation-delay:.49s;}
.overlay.visible nav ul li:nth-child(7) {animation-delay:.55s;}
.overlay.visible nav ul li:nth-child(8) {animation-delay:.67s;}
.overlay.visible nav>ul>li>ul { padding-top:20px;}
.overlay.visible nav>ul>li>ul li a {position:relative; font-size:16px; line-height:34px; color:#fff; opacity:.7; transition:.3s all;}
.overlay.visible nav>ul>li>ul li a:hover {opacity:1;}

@keyframes fadeInLeft {
	0% { opacity: 0; transform: translateX(25%); }
	100% { opacity: 1; transform: translateX(0); }
}
/*FOOTER*/
#footer {display:block; position:relative; background:#fff; padding:77px 0 85px;}
#footer .copyright {display:flex;}
#footer #top a {display:block; position:absolute; right:250px; top:0; width:52px; height:52px; text-align:center; line-height:52px; margin-right:7px; padding-top:5px; font-weight:600; background:url('/img/inc/btn_top.png') no-repeat center 7px; border:1px solid #000; border-radius:7px;}
#footer #top a>span {text-align:center; font-size:13px; color:#000}
#footer p {font-size:18px; font-weight:200; letter-spacing:-.5px;}
#footer p span {line-height:28px;}
#footer p.tel span{position:relative; font-size:26px !important; color:#1d69c7; }
#footer .logo {margin-right:35px; width:120px; height:67px; background:url('/img/inc/foot_logo.png') no-repeat left;}
#footer .btm_Rtel {position:absolute; right:320px;}
#footer .btm_Rtel p {display:block; text-align:right;}
#footer .btm_Rtel p span {font-family: 'gmarket-sans-ttf-bold' !important; font-size:16px; letter-spacing:0;}
#footer .copy{font-size:14px; opacity:.35; letter-spacing:0;}
#footer .add, #footer .mail {font-size:15px; font-weight:600;}
#footer .mail a {color:#000;}
#footer .groupBox { position: absolute; right: 10px; top: 0; }
#footer .groupBox .w3-button {width:242px; height:52px; text-align:left; vertical-align:middle; border-radius:7px; transition:.3s all;}
#footer .groupBox .w3-dropdown-content {height:100px; overflow-x:hidden; overflow-y:scroll; border-radius:7px;}

/*fixed_link*/
.fixed_link {display:flex; align-content:center; align-items:center; vertical-align:middle; position:fixed; right:0; top:0; width:61px; height:100vh; z-index:9990; background:rgba(0,0,0,.82);}
.fixed_link .tit span {display:block; position:relative; overflow:hidden; height:100%; color:#fff; transform:rotate(-90deg); letter-spacing:1px;}
/*inc_btnlink*/
.incbtnmainlink {display:inline-block; position:relative; z-index:100; cursor:pointer;}
.incbtnmainlink span{position:relative; padding-right:35px; font-size:15px; font-weight:600; background:url('/img/inc/inc_btnarw.png') no-repeat right 2px; transform:translate(1)}
.incbtnmainlink span::before {position:absolute; left:0; bottom:-5px; content:''; width:23px; height:3px; background:#fabb23; transform:translateX(0); transition:.45s all;}
.incbtnmainlink:hover span::before {width:100%; transform:translateX(1)}
/*inc_subbtnlink*/
.incbtnsublink {display:block; position:relative; z-index:100; }
.incbtnsublink span{position:relative; padding:10px 40px 10px 0; height:25px; line-height:25px; font-size:14px; font-family:'gmarket-sans-ttf-bold'; color:#000; background:url('/img/inc/inc_btnsubarw.png') no-repeat right 5px; transform:translate(1); }
.incbtnsublink span::before {position:absolute; left:0; bottom:-5px; content:''; width:23px; height:3px; background:#fabb23; transform:translateX(0); transition:.45s all;}
.incbtnsublink:hover span::before {width:100%; transform:translateX(1)}
/*blet*/
.sblet {position:relative; font-family:'gmarket-sans-ttf-bold';}
.sblet span {color:#fabb23; }
/*noimage*/
.noimage {display:block; overflow:hidden; position:relative; width:100%; height:100%; margin:0 auto; background:linear-gradient(200deg, #01e9bd, #007cde); text-align:center; opacity:.5;}
.noimage:hover {opacity:1;}
.noimage .imgbox {position:relative; display:block; text-align:center; width:170px; height:100%; margin:0 auto; padding:25px; background:url('/img/inc/img_noimage2.png') no-repeat center;}
/*browser_error container*/
.homepagelink{position:absolute; right:5%; top:2%; }
.homepagelink a {display:block; position:relative; padding:7px 45px 4px 25px; background:#e7515f; box-shadow:0 0 15px rgba(0,0,0,.13); border-radius:35px; color:#fff; font-size:.9rem; font-family:'gmarket-sans-ttf-midium'; transition:.45s;}
.homepagelink a::before {position:absolute; right:20px; top:11px; width:12px; height:12px; background:url('/img/inc/ic_snsucp.png') no-repeat; content:'';}
.homepagelink a:hover {box-shadow:0 0 10px rgba(160,171,182,1); background:#1e60bd; color:#fff; }
.browser_container {overflow:hidden; position:relative; height:100vh; margin:auto; background:#fff0ef;}
.browser_container::before {position:absolute; left:15%; top:27%; width:286px; height:314px; background:url('/img/sub/browsererror_bg1.png') no-repeat; content:'';}
.browser_container::after {position:absolute; right:25%; top:70%; width:174px; height:183px; background:url('/img/sub/browsererror_bg2.png') no-repeat; content:'';}
.browser_container .browser_errorBx{display:block; position:relative; height:90vh; text-align:center;}
.browser_container .browser_errorBx .foot_img{position:absolute; left:38%; bottom:0;}
.browser_container .browser_errorBx .foot_img img {width:90%; height:auto;}
.browser_container .browser_errorBx .browser_con{margin-bottom:95px;}
.browser_container .browser_errorBx .browser_con p{color:#5c5c82; font-size:1.35rem; margin-bottom:35px;}
.browser_container .browser_errorBx .browser_con .maintit{font-size:3rem;}
.browser_container .browser_errorBx .browser_con .subtxt span{font-family:'gmarket-sans-ttf-bold'; color:#ff6876}
.browser_container .browser_errorBx .browser_con .download_icon {display:table; overflow:hidden; width:80%; margin:0 auto;}
.browser_container .browser_errorBx .browser_con .download_icon>li {display:table-cell; margin:0 15px;}
.browser_container .browser_errorBx .browser_con .download_icon>li a {display:block; padding-top:175px; width:auto; font-size:1.1rem; font-family:'gmarket-sans-ttf-midium'; background-repeat:no-repeat; background-position:center top;}
.browser_container .browser_errorBx .browser_con .download_icon .chrome a {background-image:url('/img/sub/browsererror_chrome.png');}
.browser_container .browser_errorBx .browser_con .download_icon .whale a {background-image:url('/img/sub/browsererror_whale.png');}
.browser_container .browser_errorBx .browser_con .download_icon .edge a {background-image:url('/img/sub/browsererror_edge.png');}
.browser_container .browser_errorBx .browser_con .download_icon .firefox a {background-image:url('/img/sub/browsererror_firefox.png');}

/*only PC ver.*/
@media screen and (min-width:1099px) and (max-width:1600px) {
	.topBg .top .logo {left:0 !important;}
	.topBg .top .toggle-button {right:0 !important;}
	nav {left:475px;}
	.dropbtn>li>a {width:150px;}
	#footer p.tel span {font-size:21px !important}
	.con_wrap {max-width:95% !important;}
}
@media screen and (min-width:1024px) and (max-width:1098px) {
	.topBg .top .logo {left:120px;}
	.topBg .top .logo a {transition:.35s all; transform:scale(.75)}
	.topBg .top .toggle-button {right:120px;}
	.dropbtn {margin:34px auto 0}
	#footer p span.tel::before { position: absolute; left: -7px; top: 7px; background: rgba(255,255,255,.12); content: ''; width: 1px; height: 15px; }
	#footer p span.tel::after { position: absolute; right: 7px; top: 7px; background: rgba(255,255,255,.12); content: ''; width: 1px; height: 15px; }

}

/*only MOBILE ver.*/
@media screen and (max-width:1029px) {
	#header.top {height:154px;}
	header .logo {top:30px}
	header .logo a {background-size:80%;}
	.topBg .top .logo {left:-30px;}
	nav {left:0; margin:74px auto 0 !important;}
	.toggle-button {width: 30px; height: 28px; right:0; top:30px;}
	.toggle-button span { height: 3px;}
	.overlay nav ul li {margin:.5rem 0;}
	.container {width:100%;}
	#footer {padding-bottom:30px; height:100%;}
	#footer #top a {right:-10px; bottom:-10px;}
	#footer p {text-align:center;}
	#footer .logo {display:block; width:100%; text-align:center; background-position:center; }
	#footer .address span:nth-child(2n) {display:block;}
	#footer .groupBox { position: relative; margin-top:10px; text-align: center; height:100%;}
	#footer .groupBox .w3-dropdown-content {position:relative; max-width:242px; margin:0 auto;}
	#footer .copyright {display:block;}
	#footer .copyright .address{margin-top:25px;}
	#footer .btm_Rcon {display:flex; position:relative; align-content:start; align-items:start; vertical-align:text-top; justify-content:center;}
	#footer .copy {font-size:0.45rem;}
	#footer .btm_Rtel, #footer .btm_Rcon {position:relative; right:auto; text-align:center;}
	#footer .btm_Rtel>p {text-align:center;}
	#footer .btm_Rtel p a span {font-size:1rem !important;}
	#footer .btm_Rtel p span {font-size:1rem;}
	#footer .groupBox {margin-bottom:0; top:0; right:0;}
	#footer #top a{position:relative; top:auto; margin-right:15px;}
}

@media screen and (max-width:900px) {
	#header.top {height:98px;}
	header .logo a {background-size:56%;}
	.topBg {height:312px;}
	.overlay {width:100%;}
	.overlay nav {margin:0 auto;}
	.overlay nav>ul {padding:0;}
	.overlay nav>ul>li {text-align:center; width:45%;}
	.overlay nav>ul>li>ul>li {text-align:center;}
	#footer {padding:20px;}
}
@media screen and (max-width:680px) {
	.overlay nav ul li {margin:.25rem 0;}
	.overlay nav>ul>li>a {font-size:20px !important; padding-top:20px;}
	.overlay.visible nav>ul>li>ul {padding-top:0;}
	.overlay.visible nav>ul>li>ul li a {line-height:120%;}
	nav a, nav a span {font-size:15px; line-height:100%;}
}